<template>
	<el-dialog v-bind="dialogConfig" :visible.sync="visible">
		<iframe :src="fileUrl" frameborder="0" width="100%"></iframe>
	</el-dialog>
</template>

<script>
export default {
	props: {
		value: { type: Boolean, default: false },
		src: { type: String, default: '', required: true }
	},
	data() {
		return {
			visible: this.value,
			fileUrl: '',
			dialogConfig: {
				fullscreen: true,
				appendToBody: true,
				closeOnClickModal: true,
				class: 'pdf_preview_wrapper'
			}
		};
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
			if (!flag) return false;
			this.$nextTick(() => {
				this.fileUrl = this.src;
			});
		}
	}
};
</script>
<style lang="scss">
.pdf_preview_wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 !important;
	.el-dialog {
		position: unset;
		box-shadow: none;
		background-color: transparent;
	}
	.el-dialog__headerbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		right: 16px !important;
		top: 12px;
		width: 32px;
		height: 32px;
		font-size: 22px;
		line-height: 40px;
		border-radius: 50%;
		background-color: #3c3c3c;
		.el-dialog__close {
			color: #fff !important;
		}
		&:hover,
		&:focus {
			background-color: #4b4b4b;
		}
	}
	.el-dialog__header {
		padding: 0 !important;
		border-bottom: none !important;
	}
	.el-dialog__body {
		padding: 0 !important;
	}
}
</style>
